<template>
  <div class="content-box">
    <div class="content-title" v-if="title">
      {{ title }}
    </div>
    <div
      class="content-item"
      v-for="(item, index) in dataSource"
      :key="item.id"
    >
      <div class="left">
        <img src="../assets/avatar.jpg" alt="头像" />
      </div>
      <div class="right">
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    dataSource: {
      type: Array,
      default: () => {
        return [
          {
            imgUrl: '',
            title: '测试账号123',
            id: '123123212141',
            desc: '描述，什么都可以描述下来',
          },
          {
            imgUrl: '',
            title: '测试账号123',
            id: '41425412515215',
            desc: '描述，什么都可以描述下来',
          },
          {
            imgUrl: '',
            title: '测试账号123',
            id: '3626721',
            desc: '描述，什么都可以描述下来',
          },
        ];
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.content-box {
  .content-title {
    padding: 15px;
    line-height: 15px;
  }
  .content-item {
    background: white;
    // background: yellow;
    width: 100%;
    height: 80px;
    padding: 15px;
    display: flex;
    align-items: center;
    .left {
      height: 50px;
      width: 50px;
      img {
        box-shadow: 2px 2px 3px #e1e1e1;
        border-radius: 25%;
        border: 2px solid #fff;
        height: 50px;
        width: 50px;
      }
    }
    .right {
      margin-left: 10px;
      .title {
        font-size: 16px;
      }
      .desc {
        font-size: 14px;
      }
    }
  }
}
</style>
